 
<template>
  <div class="base-page">
    <CommonCustomNavHead title="测评" theme="light"  :pageOffsetTop="pageOffsetTop" fixColor="#fff" navBgColor="#51D1E5" />
    <view class="container">

      <view class="header">
        <text class="title">测评进度</text>
        <div class="schedule-wrap">
          <div class="bar"></div>
        </div>
        <text class="progress">1/10</text>
      </view>

      <!-- 表单主体 -->
      <view class="form-container">

        <div class="bg-title">
          <div class="bg"></div>
          <div class="title-font">
            <div class="font">请填写基本信息</div>
            <img src="https://www.thuguardian.com/files/small_program/card-id.png" alt="">
          </div>
        </div>

        <form @submit="formSubmit">
          <!-- 姓名 -->
          <view class="form-item">
            <text class="label">姓名</text>
            <input 
              class="input" 
              placeholder="请输入" 
              v-model="formData.name"
            />
          </view>

          <!-- 性别 -->
          <view class="form-item">
            <text class="label">性别</text>
            <div class="button-wrap">
              <div class="btn" @click="formData.sex = '男'" :class="{'btn-active': formData.sex == '男'}">男</div>
              <div class="btn" @click="formData.sex = '女'" :class="{'btn-active': formData.sex == '女'}">女</div>
            </div>
            <!-- <view class="radio-group">
              <label 
                v-for="item in genderOptions" 
                :key="item.value"
                class="radio-label"
                :class="{ 'selected': formData.gender === item.value }"
                @click="formData.sex = item.value"
              >
                <radio 
                  :value="item.value" 
                  :checked="formData.sex === item.value"
                  class="hidden-radio"
                />
                {{ item.label }}
              </label>
            </view> -->
          </view>

          <!-- 出生日期 -->
          <view class="form-item">
            <text class="label">出生日期</text>
            <!-- <picker 
              mode="date" 
              :value="formData.birthday"
              @change="onDateChange"
              class="picker"
            >
              <view class="picker-text">
                {{ formData.birthDate || '请选择' }}
                <img class="calendar-icon" src="https://www.thuguardian.com/files/small_program/icon-picker.png" alt="">
              </view>
            </picker> -->
            <view class="from-group">
              <view class="picker from-group picker-text" @click="isBirthPopup = true">
                {{ formData.birthday || '请选择' }}
                <img class="calendar-icon" src="https://www.thuguardian.com/files/small_program/icon-picker.png" alt="">
              </view>
              <!-- <picker
                :value="formData.birthday"
                mode="date" 
                @change="onDateChange"
                class="picker"
              >
                <view class="picker-text">
                  {{ formData.birthday || '请选择' }}
                  <img class="calendar-icon" src="https://www.thuguardian.com/files/small_program/icon-picker.png" alt="">
                </view>
              </picker> -->
            </view>
          </view>

          <!-- 手机号 -->
          <view class="form-item">
            <text class="label">手机号</text>
            <input 
              class="input" 
              placeholder="请输入" 
              type="number"
              v-model="formData.mobile"
            />
          </view>

          <!-- 居住地 -->
          <view class="form-item">
            <text class="label">居住地</text>
            <view class="address-group">
              <view class="region-picker from-group picker-text" @click="isAddress = true">{{ formData.region_name ? formData.region_name.join('-') : '请选择所在地区' }}</view>
              <view class="address-input">
                <van-field
                  class="con"
                  :value="formData.address"
                  type="textarea"
                  placeholder="请输入详细地址"
                  :border="false"
                  maxlength="200"
                  :autosize="{
                    maxHeight: 56,
                    minHeight: 56
                  }"
                  clearable
                  @change="handleAddress"
                />
                <img @click="getposition" class="location-icon" src="https://www.thuguardian.com/files/small_program/icon-address.png" alt="">
              </view>
            </view>
            <!-- <view class="address-group">
              <picker
                class="region-picker"
                @change="onRegionChange"
                mode="region"
              >
                <view class="picker-text">{{ formData.region || '请选择所在地区' }}</view>
              </picker>
              <view class="address-input">
                <van-field
                  class="con"
                  :value="formData.address"
                  type="textarea"
                  placeholder="请输入详细地址"
                  :border="false"
                  maxlength="200"
                  :autosize="{
                    maxHeight: 56,
                    minHeight: 56
                  }"
                  clearable
                  @change="handleAddress"
                />
                <img @click="getposition" class="location-icon" src="https://www.thuguardian.com/files/small_program/icon-address.png" alt="">
              </view>
            </view> -->
          </view>

          <!-- 居住情况 -->
          <view class="form-item">
            <text class="label">居住情况</text>
            <view class="radio-group">
              <van-radio-group  :value="formData.live_type">
                <div v-for="item in livingOptions" :key="item.value" class="radit-label-item" @click="formData.live_type = item.value" >
                  <van-radio class="agreement-radio" checked-color="#00AFCB" :name="item.value">
                    {{ item.label }}
                  </van-radio>
                </div>
              </van-radio-group>
            </view>
            <input 
              v-if="formData.live_type === '养老机构'"
              class="input institution-input" 
              placeholder="请输入机构名称" 
              v-model="formData.institution_name"
            />
          </view>

          <!-- 填写人 -->
          <view class="form-item">
            <text class="label">本问卷由谁填写</text>
            <view class="radio-group">
              <van-radio-group  :value="formData.enter_person">
                <div v-for="item in fillerOptions" :key="item.value" class="radit-label-item" @click="formData.enter_person = item.value" >
                  <van-radio class="agreement-radio" checked-color="#00AFCB" :name="item.value">
                    {{ item.label }}
                  </van-radio>
                </div>
              </van-radio-group>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view class="button-group">
            <!-- <button class="btn prev-btn" @click="handleBack">上一步</button> -->
            <button class="btn next-btn" formType="submit" @click="handleNext">下一步</button>
          </view>
        </form>
      </view>
    </view>

    <!-- 出生日期 -->
    <van-popup
      :show="isBirthPopup"
      position="bottom"
      round
      custom-style="width: 100%;"
      @close="handleBirthClose"
    >
      <van-datetime-picker
        type="date"
        :value="birthday"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onDateChange"
        @cancel="handleBirthClose"
      />
    </van-popup>

    <!-- 地址 -->
    <van-popup
      :show="isAddress"
      position="bottom"
      round
      custom-style="width: 100%;"
      @close="handleAddressClose"
    >
      <van-area
        :value="formData.region"
        :area-list="areaList"
        @confirm="onRegionChange"
        @cancel="handleAddressClose"
      />
    </van-popup>
  </div>
</template>

<script>
import CommonCustomNavHead from '@/components/CommonCustomNavHead/index.vue';
import QQMapWX from '@/common/qqmap-wx-jssdk.js'
  import { questionnaireInfo } from '@/api/report/index'
  import { addDevice } from '@/api/common/index'
import { fmtTimeStamp  } from '@/utils/index';
import { areaList } from '@vant/area-data'

export default {
  components: {
    CommonCustomNavHead
  },
  data() {
    return {
      pageOffsetTop: 0,
      token: '',
      userInfo: {},
      // 出生日期
      isBirthPopup: false,
      birthday: new Date(1970,1,1).getTime(),
      minDate: new Date(1900, 1, 1).getTime(),
      maxDate: new Date().getTime(),
      formData: {
        name: '',
        sex: '',
        mobile: '',
        birthday: '1970-01-01',
        region_name: '',
        region: '',
        province: '',
        city: '',
        district: '',
        address: '',
        live_type: '',
        institution_name: '',
      },
      livingOptions: [
        { label: '家', value: '家' },
        { label: '医院', value: '医院' },
        { label: '养老机构', value: '养老机构' }
      ],
      fillerOptions: [
        { label: '本人', value: '本人' },
        { label: '家人', value: '家人' },
        { label: '护理人员', value: '护理人员' }
      ],
      // 地址
      areaList,
      isAddress: false,
      // 设备信息
      device_no: '',
      version: ''
    }
  },
  onShow() {
    this.token = wx.getStorageSync('token');
  },
  onLoad() {
    this.userInfo = wx.getStorageSync('userInfo')
    if (wx.getStorageSync('userInfo')) {
      this.getInfo()
    } else  {
      this.goLogin()
    }
    this.getDeviceInfo()
    this.getVersion()
  },
  onPageScroll ({scrollTop}) {
    this.pageOffsetTop = scrollTop
  },
  methods: {
    goLogin() {
      wx.navigateTo({
        url: '/pages/login/main'
      })
    },
    async getInfo () {
      const res = await questionnaireInfo({
        older_id: this.userInfo.id
      })
      if (res.code == 200) {
        const info = res.data
        this.formData.name = info.name || ''
        this.formData.sex = info.sex || ''
        this.formData.birthday = info.birthday || '1970-01-01'
        this.formData.mobile = info.mobile || this.userInfo.mobile || ''
        this.formData.region_name = info.province ? [info.province, info.city, info.district] : ''
        this.formData.province = info.province || ''
        this.formData.city = info.city || ''
        this.formData.district = info.district || ''
        this.formData.address = info.address || ''
        this.formData.live_type = info.live_type || ''
        this.formData.institution_name = info.institution_name || ''
        this.formData.enter_person = info.enter_person || ''
        if (info.district) {
          Object.keys(this.areaList.county_list).forEach(v => {
            if (this.areaList.county_list[v] === info.district) {
              this.formData.region = v
            }
          })
        }
      }
    },
    getDeviceInfo: function () {
      try {
        const res = wx.getDeviceInfo();
        console.log("设备信息:", res);
        this.device_no = `${res.brand}_${res.model}_${res.platform}_${this.userInfo.id}`
      } catch (e) {
        console.error("获取设备信息失败:", e);
      }
    },
    getVersion: function () {
      const accountInfo = wx.getAccountInfoSync();
      console.log("账号信息:", accountInfo);

      const miniProgram = accountInfo.miniProgram;
      if (miniProgram) {
        const version = miniProgram.version; // 获取版本号
        console.log("小程序版本号:", version);
        this.version = version || '无版本号'; // 如果没有版本号，则显示 "无版本号"
      } else {
        console.warn("无法获取小程序信息");
        this.version = '无法获取'
      }
    },
    async getDevice () {
      const res = await addDevice({
        version: this.version,
        no: this.device_no,
        province: this.formData.region_name[0],
        city: this.formData.region_name[1],
        district: this.formData.region_name[2],
        type: 2
      })
    },
    // onDateChange(e) {
    //   console.log(e, '----')
    //   this.formData.birthday = e.detail.value
    // },
    // onRegionChange(e) {
    //   this.formData.province = e.detail.value[0]
    //   this.formData.city = e.detail.value[0]
    //   this.formData.district = e.detail.value[0]
    // },
    formSubmit(e) {
      console.log('表单数据：', this.formData)
      // 这里添加提交逻辑
    },
    handleBack() {
      wx.navigateBack();
    },
    handleNext() {
      // const keys = Object.keys(this.formData)
      console.log(this.formData, 'this.formDatathis.formData')
      // const data = keys.find(item => {
      //   if (item === 'institution_name' && this.formData.live_type != '养老机构') {
      //     return false
      //   }
      //   return !this.formData[item]
      // })

      // if (data) {
      //   uni.showToast({ title: '请完善信息', icon: 'none' })
      //   return
      // }

      if (!this.formData.name) {
        uni.showToast({ title: '请输入您的姓名', icon: 'none' })
        return
      }

      if (!this.formData.sex) {
        uni.showToast({ title: '请选择性别', icon: 'none' })
        return
      }

      if (!this.formData.birthday) {
        uni.showToast({ title: '请选择出生日期', icon: 'none' })
        return
      }

      if (!/^1[3-9]\d{9}$/.test(this.formData.mobile)) {
        uni.showToast({ title: '请输入有效手机号', icon: 'none' })
        return
      }

      if (!(this.formData.birthday)) {
        uni.showToast({ title: '请选择出生日期', icon: 'none' })
        return
      }

      if (!(this.formData.region_name && this.formData.region_name.length > 0)) {
        uni.showToast({ title: '请选择居住地', icon: 'none' })
        return
      }

      if (!this.formData.live_type) {
        uni.showToast({ title: '请选择居住情况', icon: 'none' })
        return
      }

      if (!this.formData.enter_person) {
        uni.showToast({ title: '请选择本问卷由谁填写', icon: 'none' })
        return
      }
      this.getDevice()
      wx.setStorageSync('testInfo', JSON.stringify(this.formData))
      wx.navigateTo({
        url: '/pages/appraisal-step/main'
      })
    },
    getDetailedAddress(address) {
      // 更全面的正则表达式 (根据实际地址数据调整)
      const provinceCityDistrictRegex = new RegExp(
          "(" +
          "(?:北京市|天津市|上海市|重庆市)" + "|" + // 直辖市
          "(?:[内蒙古|新疆|西藏|宁夏|广西]?(?:自治区))" + "|" + // 自治区
          "(?:黑龙江省|吉林省|辽宁省|河北省|河南省|山东省|山西省|陕西省|甘肃省|青海省|四川省|云南省|湖南省|湖北省|安徽省|江西省|江苏省|浙江省|福建省|广东省|海南省)" + // 省份
          ")?" + // 省 (可选)
          "(" + "(?:[市州盟])" + ")?" + // 市 (可选)
          "(" + "(?:[区县市旗])" + ")?"
      );
      console.log(address.replace(provinceCityDistrictRegex, ''), 'provinceCityDistrictRegexprovinceCityDistrictRegex')
      // 替换省市区信息为空字符串
      let detailedAddress = address.replace(provinceCityDistrictRegex, "").trim();

      // 去除多余的空格和分隔符
      detailedAddress = detailedAddress.replace(/^[,，、\s]+|[,，、\s]+$/g, ""); //移除首尾的空格、逗号等
      return detailedAddress;
    },
    formattAddress (str) {
      const reg_address = "(?<province>[^省]+自治区|.*?省|.*?行政区|.*?市)(?<city>[^市]+自治州|.*?地区|.*?行政单位|.+盟|市辖区|.*?市|.*?县)(?<county>[^县]+县|.+?(区{1})|.+市|.+旗|.+海域|.+岛)?(?<village>.*)";
      if (!str) return
        // 中国4个直辖市
        const municipality = ['重庆', '北京', '上海', '天津']
        const subStr = str.substring(0, 2)
        const isExist = municipality.includes(subStr)
        if (isExist) {
          str = str.substring(2, str.length)
          str = `${subStr}省${str}`.trim();
        }
        let addr = str.match(reg_address)
        if (!addr) return
        const groups = Object.assign({}, addr.groups)
        // 如果是直辖市，截取地址后，把省字替换成市
        if (isExist) {
          groups.province = groups.province.replace('省', '')
        }
        return groups
    },
    async getposition() {
      uni.chooseLocation({
        success: (res) => {
          console.log(res, '345345543000000')
          const address = `${res.address}${res.name}`
          const addressGroup = this.formattAddress(address)
          console.log(addressGroup, 'detailAddressdetailAddress')
          this.formData.address = addressGroup.village
        },
        fail: () => {
          uni.getSetting({
            success: (res) => {
              var status = res.authSetting;
              if(!status['scope.userLocation']){
              // 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
                uni.showModal({
                  title:"是否授权当前位置",
                  content:"需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
                  success:(tip)=>{
                    if(tip.confirm){
                    // 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
                      uni.openSetting({
                        success:(data)=>{
                        // 如果用户授权了地理信息在，则提示授权成功
                          if(data.authSetting['scope.userLocation']===true){
                            uni.showToast({
                              title:"授权成功",
                              icon:"success",
                              duration:1000
                            })
                            // 授权成功后，然后再次chooseLocation获取信息
                            uni.chooseLocation({
                              success: (res) => {
                                console.log("详细地址",res);
                                // this.getRegionFn(res);
                              }
                            })
                          }else{
                            uni.showToast({
                              title:"授权失败",
                              icon:"none",
                              duration:1000
                            })
                          }
                        }
                      })
                    }
                  }
                })
              }
            },
            fail: (res) => {
              uni.showToast({
                title:"调用授权窗口失败",
                icon:"none",
                duration:1000
              })
            }
          })
        }
      })
      // const location = await this.getLocationInfo()
      // console.log("lo",location)
      // this.position = location.formatted_addresses
      // console.log("po",this.position)
    },
    async getLocationInfo() {
      return new Promise((resolve) => {
        let location = {
          longitude: 0,
          latitude: 0,
          province: "",
          city: "",
          area: "",
          street: "",
          address: "",
          formatted_addresses:""
        };
        // 使用uni.getLocation获取经纬度
        uni.getLocation({
          type: "gcj02",
          isHighAccuracy: true,
          success(res) {
            location.longitude = res.longitude;
            location.latitude = res.latitude;
            // 创建实例
            const qqmapsdk = new QQMapWX({
              key: 'NVRBZ-PS4CM-TT364-66G5B-VIQJH-LTF4Q' //这里填写自己申请的key
            });
            // 使用腾讯的逆地址解析
            qqmapsdk.reverseGeocoder({
              location,
              success(response) {
                console.log("成功！",response.result)
                let info = response.result;
                console.log(info, '-=-=-=-=-');
                location.province = info.address_component.province;
                location.city = info.address_component.city;
                location.area = info.address_component.district;
                location.street = info.address_component.street;
                location.address = info.address;
                location.formatted_addresses = info.formatted_addresses.standard_address
                resolve(location);
              },
            });
          },
          fail(err) {
            console.log(err)
            resolve(location);
          },
        });
      });
    },
    onDateChange(e) {
      this.isBirthPopup = false
      this.birthday = e.detail || e.detail.value
      this.formData.birthday = fmtTimeStamp((e.detail / 1000), true)
      console.log(this.formData.birthday, '0000')
    },
    handleBirthClose() {
      this.isBirthPopup = false
    },
    onRegionChange(e) {
      console.log(e, '-=-=-=')
      this.isAddress = false
      if (e.detail && e.detail.values) {
        this.formData.region = e.detail.values[2].code
        this.formData.province = e.detail.values[0].name
        this.formData.city = e.detail.values[1].name
        this.formData.district = e.detail.values[2].name
        this.formData.region_name = [this.formData.province, this.formData.city, this.formData.district]
      } else {
        this.formData.region = e.values[2].code
        this.formData.province = e.values[0].name
        this.formData.city = e.values[1].name
        this.formData.district = e.values[2].name
        this.formData.region_name = [this.formData.province, this.formData.city, this.formData.district]
      }
    },
    handleAddressClose() {
      this.isAddress = false
    },
    handleAddress(e) {
      this.formData.address = e.detail || e.mp.detail
    },
  }
}
</script>

<style lang="less" scoped>
@primary-color: #007AFF;

.container {
  background: #f5f5f5;
  min-height: 100vh;
  padding-top: 100px;
  background: url('https://www.thuguardian.com/files/small_program/bg02.png') no-repeat;
  background-size: 100% auto;
  .header {
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    
    .title {
      font-size: 14px;
      color: #fff;
    }

    .schedule-wrap {
      width: 186px;
      height: 8px;
      border-radius: 8px;
      background: #0AAEC8;
      .bar {
        width: 25rpx;
        height: 8px;
        border-radius: 8px;
        background: #ACEFFA;
      }
    }
    
    .progress {
      font-size: 14px;
      color: #fff;
    }
  }
}

.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #666;
  
  .status-icons {
    display: flex;
    align-items: center;
    gap: 20rpx;
  }
}

.form-container {
  background: white;
  padding: 40rpx;
  border-radius: 20rpx 20rpx 0 0;
  
}

.bg-title {
  margin-bottom: 32px;
  width: 100%;
  height: 44px;
  position: relative;
  .bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 18px;
    background: #ACEFFA;
    z-index: 10;
  }

  .title-font {
    position: absolute;
    top: 6px;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    z-index: 11;

    img {
      display: block;
      margin-right: -2px;
      margin-left: auto;
      width: 44px;
      height: 44px;
    }

    .font {
      font-size: 20px;
      font-weight: 500;
      color: rgba(0, 0, 0, .85);
    }
  }
}

.main-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 50rpx;
  
  .label {
    display: block;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: bold;
    color: rgba(0,0,0,0.65);
  }
  .input {
    height: 25px;
    border: 1px solid #00AFCB;
    border-radius: 8px;
    padding: 12px;
    font-size: 18px;
    
    &[type="number"] {
      font-family: monospace;
    }
  }
}

.picker {
  height: 25px;
  border: 1px solid #00AFCB;
  border-radius: 8px;
  padding: 12px;
  font-size: 18px;
}

.radio-group {
  gap: 40rpx; 

  .radit-label-item {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    background: #E5FAF7;
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 0 16px;
    box-sizing: border-box;
  }
  
  .radio-label {
    padding: 12rpx 30rpx;
    border: none;
    height: 48px;
    width: 148px;
    font-size: 18px;
    text-align: center;
    line-height: 48px;
    color: rgba(0,0,0,0.65);
    background: #E5FAF7;
    border-radius: 8px;
    transition: all 0.2s;
    
    // &.selected {
    //   border-color: @primary-color;
    //   background: fade(@primary-color, 10%);
    //   color: @primary-color;
    // }
  }
}
.hidden-radio {
  display: none;
}

.address-group {
  .region-picker {
    height: 25px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 12px;
    font-size: 18px;
  }
  
  .address-input {
    position: relative;
    height: 56px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    font-size: 18px;
    margin-top: 16px;
    
    .location-icon {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 100;
      width: 24px;
      height: 24px;
      // background: url('') no-repeat center;
    }
  }
}
.button-group {
  display: flex;
  justify-content: center;
  margin-top: 60rpx;
  
  .btn {
    width: 288px;
    height: 48px;
    line-height: 48px;
    font-size: 20px;
    border-radius: 8px;
    border: 1px solid #00AFCB;
    background: #FFF;
    color: #00AFCB;
    overflow: hidden;
  }
}
// 图标样式需要替换实际图标
.calendar-icon,
.location-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
}

.picker-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.button-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .btn {
    width: 144px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 18px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #00AFCB;
    overflow: hidden;
  }
  
  .btn-active {
    background: #E5FAF7;
    border: 1px solid #E5FAF7;
  }
}

.from-group {
  margin-top: 16px;
  &.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .input-field {
    display: block;
    padding: 0 12px;
    height: 50px;
    font-size: 18px;
    color: rgba(0, 0, 0, .85);
    line-height: 48px;
    border: 1px solid #00AFCB;
    border-radius: 8px;
  }

  .radio {
    width: 148px;
    height: 50px;
    line-height: 48px;
    text-align: center;
    font-size: 18px;
    color: rgba(0, 0, 0, .65);
    background: #E5FAF7;
    border: 1px solid #E5FAF7;
    border-radius: 8px;
    &.active {
      color: #00AFCB;
      border-color: #00AFCB;
    }
  }

  .input-group {
    margin-bottom: 24px;
    position: relative;
    
    .input-field {
      height: 48px;
      padding: 0 16px;
      border: 2rpx solid rgba(0, 0, 0, .1);
      border-radius: 8px;
      font-size: 18px;
      
      &::placeholder {
        color: #999;
      }
    }
  }
  .code-group {
    display: flex;
    align-items: center;
    
    .input-field {
      flex: 1;
      margin-right: 20rpx;
    }
    
    .get-code-btn {
      width: 124px;
      height: 48px;
      padding: 0;
      line-height: 48px;
      color: #00AFCB;
      font-size: 14px;
      background: #fff;
      border-radius: 24px;
      border: 1px solid #00AFCB;
      
      &[disabled] {
        background: rgba(0, 175, 203, .5);
        border: 1px solid rgba(0, 175, 203, .5);
      }
    }
  }

}

.address-group {
  margin-top: 16px;
  .region-picker {
    height: 25px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 12px;
    font-size: 18px;
  }
  
  .address-input {
    position: relative;
    height: 80px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    // padding: 12px;
    padding-right: 36px;
    font-size: 18px;
    margin-top: 16px;
    overflow: hidden;
    
    .location-icon {
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
    }
  }
}

/deep/ .van-field__placeholder {
  font-size: 18px;
}
/deep/ .van-field__control--textarea {
  font-size: 18px;
}
</style>